import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { uuid } from '../../services/Tools';

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = { theme: 'snow' };
    this.modules = {
      toolbar: {
        container: [
          [{ header: '1' }, { header: '2' }],
          [
            'bold',
            'underline',
            'blockquote',
            // { color: ['red', 'green', 'blue', 'orange', 'violet', '#d0d1d2', 'black'] },
          ],
          [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
          // ['image'],
          // ['link', 'video'],
          // ['clean'],
        ],
        handlers: {
          image: () => {
            const self = this;
            this.container = this.quillRef.editingArea;
            const quill = this.quillRef.getEditor();
            let fileInput = this.container.querySelector('input.ql-image[type=file]'); // fileInput

            if (fileInput == null) {
              fileInput = document.createElement('input');
              fileInput.setAttribute('type', 'file');
              fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
              fileInput.classList.add('ql-image');
              fileInput.addEventListener('change', () => {
                if (fileInput.files != null && fileInput.files[0] != null) {
                  // getSelection 选择当前光标位置咯 然后在下一个range.index用它自带的embed媒介插入方式插入你已经存储在阿里上的图片了
                  const range = quill.getSelection(true);
                  const file = fileInput.files[0];
                  const suffix = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
                  const name = uuid();
                  self.props
                    .onUpload(file, self.props.path, self.progress, `${self.props.path}/${name}${suffix}`)
                    .then(data => {
                      self.setState({ uploading: false, load: self.state.load + 1 });
                      quill.insertEmbed(range.index, 'image', data.url);
                      quill.setSelection(range.index + 1);
                    })
                    .catch(err => {
                      self.setState({ uploading: false, load: self.state.load + 1 });
                      if (self.props.onError) self.props.onError(err);
                    });
                }
              });
            }
            fileInput.click();
          },
        },
      },
      clipboard: {
        // toggle to add extra line breaks when pasting HTML:
        matchVisual: false,
      },
    };
  }

  progress(data) {
    return done => {
      if (this.props.onProgress) this.props.onProgress(data);
      done();
    };
  }

  render() {
    return (
      <div>
        <ReactQuill
          ref={el => {
            this.quillRef = el;
          }}
          defaultValue={this.props.value}
          style={this.props.style}
          theme={'snow'}
          onChange={(content, delta, source, editor) => this.props.onChange && this.props.onChange(content, delta, source, editor)}
          // value={new Delta(this.props.value)}
          modules={this.modules}
          formats={Editor.formats}
          placeholder={this.props.placeholder}
        />
      </div>
    );
  }
}

Editor.formats = [
  'header',
  'font',
  'size',
  'bold',
  'italic',
  'underline',
  'strike',
  'blockquote',
  'color',
  'list',
  'bullet',
  'indent',
  'link',
  // 'image',
  // 'video',
];

export default Editor;
